<script setup>
import { ref, onMounted } from 'vue'
import { getInfo } from '@/api/product'
const formDate = ref({
  id: '', //商品编号
  title: '', //商品标题
  level: '', //分类
  category: '', //类目
  status: '', //状态
  founder: '', //创建人
  date1: '',
  date2: '',
})
// 表单
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },]
// 商品分类
const sortData = ref([])
const getInfoAPI = async () => {
  const res = await getInfo()
  console.log(res)
//   sortData.value = res.data
}

//页面加载获取数据
onMounted(() => {
  getInfoAPI()
})
</script>

<template>
  <div>
  <el-card shadow="never" class="control">
  <el-form :model="formDate">
      <!-- 头部 -->
    <el-row type="flex" justify="start" :gutter="20">
            <el-col :span="4">
              <el-form-item label="商品编号:" prop="id" label-width="100px">
                <el-input v-model="formDate.id" placeholder="请输入" style="width: 150px;"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item label="商品标题:" prop="title" label-width="150px">
                <el-input v-model="formDate.title" placeholder="请输入" style="width: 150px;" ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item label="分类:" prop="sort" label-width="180px">
                <el-select v-model="formDate.sort" placeholder="请选择" style="width: 120px;">
                  <el-option
                    v-for="item in sortData"
                    :key="item?.id"
                    :label="item?.name"
                    :value="item?.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item label="类目:" prop="category" label-width="190px">
                <el-select v-model="formDate.category" placeholder="请选择" style="width: 120px;">
                  <el-option
                    v-for="item in categoryData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item label="商品状态:" prop="status" label-width="210px">
                <el-select v-model="formDate.status" placeholder="请选择" style="width: 120px;">
                  <el-option
                    v-for="item in statusData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-form-item label="创建人:" prop="founder" label-width="80px">
                <el-input v-model="formDate.founder" placeholder="请输入" style="width: 150px;"></el-input>
              </el-form-item>
            </el-col>

         
         <el-form-item label="创建时间:" label-width="90px">
        <el-col :span="9">
        <el-date-picker
          v-model="formDate.date1"
          type="date"
          placeholder="开始时间"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="9">
        <el-date-picker
          v-model="formDate.date2"
          type="date"
          placeholder="结束时间"
          style="width: 100%"
        />
      </el-col>
        </el-form-item> 
      </el-row>
<!-- 按钮 -->
     <el-row class="mb-4">
        <el-button round>重置</el-button>
        <el-button type="primary" round>查询</el-button>
        <el-button type="primary" round style="margin-left: 20px;">+新增商品</el-button>
      </el-row>
  </el-form>
</el-card>
<!-- 表单 -->
<!-- dada -->
<el-table :data="tableData" style="width: 100%" height="250"  class="tale-mian">
    <el-table-column  prop="date" label="编号" width="150" />
    <el-table-column prop="name" label="商品标题" width="120" />
    <el-table-column prop="state" label="商品图片" width="120" />
    <el-table-column prop="city" label="类目" width="120" />
    <el-table-column prop="address" label="分类" width="120" />
    <el-table-column prop="zip" label="素材" width="120" />
    <el-table-column prop="zip" label="价格" width="120" />
    <el-table-column prop="zip" label="佣金" width="120" />
    <el-table-column prop="zip" label="核销方式" width="120" />
    <el-table-column prop="zip" label="商品状态" width="120" />
    <el-table-column prop="zip" label="售卖时间" width="120" />
    <el-table-column prop="zip" label="创建人" width="120" />
    <el-table-column prop="zip" label="创建时间" width="120" />
    <el-table-column prop="zip" label="分享" width="120" />
    <el-table-column prop="zip" label="销量" width="120" />
    <el-table-column prop="zip" label="库存" width="120" />
    <el-table-column fixed="right" prop="zip" label="操作" width="120">
      <template #default>
     <div>查看商品</div>
     <div>下架</div>
      </template>
    </el-table-column>
  </el-table>
     <!-- 分页 -->
      
  </div>
</template>

<style scoped>
.control {
  position: relative;
  height: 100%;
  width: 100%;
  /* min-width: 1116px; */
  background-color: #fff;
  border-radius: 4px;
  margin-left: 10px;
}
.mb-4 {
  float: right;
  margin-top: -40px;
  /* margin-left: 800px; */
}
.tale-mian {
  margin-top: 15px;
  margin-left: 10px;
}
.paging {
  margin-top: 20px;
}
</style>